<template>
  <!-- 大客户项目跟进管理->战败审核 -->
  <div>
    <!-- 搜索 -->
    <TopFilter :list="topFilterInit" :cols="3" labelWidth="90" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchapi"
      :isSelectColumn="isSelectColumn"
      :params="fetchParams"
      :datakey="'records'"
      columnsRef="customerManage_continueManage_continue_index_01"
      :onColumnsChange="columns => (this.columns = columns)"
    ></FilterTable>
    <Drawer ref="infoDrawer" :visible.sync="visibleDrawer" title="延续审核" :width="920" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <info-modal :infoType="type" :rowData="formData" @close="infoClose" />
    </Drawer>

    <Drawer ref="infoDrawer" :visible.sync="visibleDrawer2" title="延续审核" :width="920" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <show-modal :infoType="type" :rowData="formData" @close="infoClose2" />
    </Drawer>
    <!-- 经销商弹窗 -->
    <BaseDialog title="经销商查询" :visible.sync="visibleDealer" width="1000px" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <dealerMadal selectType="multiple" v-model="initDealerData" ref="dealerDialog" @close="closeDealer" />
    </BaseDialog>
  </div>
</template>
<script>
import dealerMadal from '@/pages/cms-common/dealerdata';
import infoModal from './info';
import showModal from './show';
import { dictionary } from '@/utils/dictMixin';
import { failureList } from '@/api/cms-api/customerManage/continueManage/failure/index';
import { formatdateByTime } from '@/utils/index';
export default {
  mixins: [dictionary],
  components: {
    infoModal,
    showModal,
    dealerMadal
  },
  data() {
    return {
      visibleDrawer: false,
      visibleDrawer2: false,
      isSelectColumn: false,
      visibleDealer: false,
      fetchapi: failureList,
      dealerCode: '',
      dealerName: '',
      topFilterInit: this.topFilterInitFun(),
      infoId: '', //记录行id
      type: 'add', //add编辑 ，info详情
      flterValue: {}, //参数
      columns: this.creatHeader(),
      formData: {},
      fetchParams: { applyType: '25221002', applyStatus: '25241001' } //ipa 接口
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    formatDates: function(value) {
      // 这里的 value 就是需要过滤的数据
      if (value == null || value == '') {
        return '';
      }
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + '-' + month + '-' + day;
    },
    //搜索数据
    topFilterInitFun() {
      return [
        { type: 'INPUT', label: '客户公司名称', fieldName: 'customerName', placeholder: '请输入', initialValue: '' },
        { type: 'INPUT', label: '项目名称', fieldName: 'projectName', placeholder: '请选择', initialValue: '' },
        { type: 'SELECT', label: '项目跟进状态', fieldName: 'projectFollowUpStatus', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2581') },
        {
          type: 'RANGE_DATE',
          label: '延续申请日期',
          fieldName: 'applyForDate',
          valueFormat: 'yyyy-MM-dd', //返回数据格式
          placeholder: '请选择'
        },
        {
          type: 'INPUT',
          label: '经销商',
          fieldName: 'dealerName',
          placeholder: '请选择',
          readonly: true,
          initialValue: '',
          unitRender: () => {
            return (
              <div>
                <el-button slot="append" icon="el-icon-search" onClick={() => this.openDialog()}></el-button>
                <el-button slot="append" icon="el-icon-delete" onClick={() => this.clearSelectDealer()}></el-button>
              </div>
            );
          }
        },
        { type: 'SELECT', label: '审批状态', fieldName: 'applyStatus', placeholder: '请选择', initialValue: 25241001, itemList: this.createDictList('2524') }
      ];
    },
    //搜索获取数据
    changeHandle(val) {
      var time = val.applyForDate;
      //清空，防止查询时带有多余的条件
      val = Object.assign({}, { applyForDateBegin: time[0] }, val);
      val = Object.assign({}, { applyForDateEnd: time[1] }, val);
      val = Object.assign({}, { applyType: '25221002' }, val);
      val = Object.assign({}, val, { dealerCode: this.dealerCode });
      if (val.dealerName == '') {
        this.dealerCode = '';
      }
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            if (props.row.applyStatus == '25241001') {
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row, 'info')}>
                    审核{' '}
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button size="mini" type="text" onClick={() => this.editHandle(props.row, 'edit')}>
                    详情
                  </el-button>
                </div>
              );
            } else {
              return (
                <div>
                  <el-button size="mini" type="text" onClick={() => this.editHandle(props.row, 'edit')}>
                    详情{' '}
                  </el-button>
                </div>
              );
            }
          }
        },
        {
          title: '项目跟进状态',
          dataIndex: 'projectFollowUpStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.projectFollowUpStatus, '2581')}</span>;
          }
        },
        {
          title: '审批状态',
          dataIndex: 'applyStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.applyStatus, '2524')}</span>;
          }
        },
        { title: '客户公司名称', dataIndex: 'customerName', sorter: true },
        { title: '项目名称', dataIndex: 'projectName', sorter: true },
        { title: '项目编号', dataIndex: 'projectCode', sorter: true },
        { title: '经销商', dataIndex: 'dealerName', sorter: true },
        // { title: '区域经理', dataIndex: 'field3', sorter: true },
        { title: '延续原因', dataIndex: 'applyReason', sorter: true },
        {
          title: '申请时间',
          dataIndex: 'applyForDate',
          sorter: true,
          width: 150,
          dateFormat: 'YYYY-MM-DD HH:mm:ss'
          //   render: props => {
          //     return <span>{formatdateByTime(props.row.applyForDate)} </span>;
          //   }
        },
        {
          title: '审核时间',
          dataIndex: 'reviewDate',
          sorter: true,
          width: 150,
          dateFormat: 'YYYY-MM-DD HH:mm:ss'
          //   render: props => {
          //     return <span>{formatdateByTime(props.row.reviewDate)} </span>;
          //   }
        },
        { title: '审核人', dataIndex: 'reviewPersionName', sorter: true },
        { title: '审核意见', dataIndex: 'checkDesc', sorter: true }
      ];
    },
    clearSelectDealer() {
      this.topFilterInit.find(item => item.fieldName === 'dealerName').initialValue = '';
      this.dealerCode = '';
      this.dealerName = '';
    },
    //打开经销商弹窗
    openDialog() {
      this.initDealerData = {
        excludeBigCustomer: false, //是否查询大客户经销商，如果查询 true，不查询 false
        id: 1001
      };
      this.visibleDealer = true;
    },
    //经销商窗口关闭，返回数据
    closeDealer(data) {
      if (data.data && data.data.length > 0) {
        //清空数据内容
        this.dealerCode = '';
        this.dealerName = '';
        //循环返回数据
        data.data.forEach(x => {
          //插入经销商id
          // this.dealerList.push(x.dealerId);
          //使用逗号分隔拼接经销商ID
          x.dealerCode = "'" + x.dealerCode + "'";
          if (this.dealerCode == '') {
            this.dealerCode = x.dealerCode;
          } else {
            this.dealerCode += ',' + x.dealerCode;
          }
          // this.dealerList.push(x.dealerId);
          //使用逗号分隔拼接经销商名称
          if (this.dealerName == '') {
            this.dealerName = x.dealerName;
          } else {
            this.dealerName += ',' + x.dealerName;
          }
        });
        this.topFilterInit[4].initialValue = this.dealerName;
      }
      this.visibleDealer = data.visible; //关闭弹窗
    },
    //详情
    detailHandle(row, type) {
      //逻辑自己写
      this.visibleDrawer = true;
      (this.formData = row), (this.infoId = 1000);
      this.type = type;
    },
    //详情
    editHandle(row, type) {
      //逻辑自己写
      this.visibleDrawer2 = true;
      (this.formData = row), (this.infoId = 1000);
      this.type = type;
    },
    //关闭详情
    infoClose() {
      this.visibleDrawer = false;
      // 重新加载
      this.fetchParams = { ...this.fetchParams };
    },
    infoClose2() {
      this.visibleDrawer2 = false;
    },
    // dealerHandle() {
    //   this.visibleDealer = true;
    // },
    // closeDealer(data) {
    //   console.log('9989898989', data.data);
    //   this.topFilterInit.find(item => item.fieldName === 'dealerId').initialValue;
    // },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    }
  }
};
</script>

<style lang="less" scoped></style>
